<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git合并策略指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f8f9fa;
        }
        h1, h2, h3, h4, h5 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #1a1a1a;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .merge-icon {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 auto 20px;
            color: white;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 md:px-12">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Git合并策略完全指南</h1>
                <p class="text-xl md:text-2xl opacity-90 mb-8">掌握Git合并策略的艺术，提升团队协作效率</p>
                <div class="flex justify-center space-x-4">
                    <div class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition">开始学习</div>
                    <div class="border border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">查看示例</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto px-6 md:px-12 py-16">
        <div class="max-w-4xl mx-auto">
            <!-- Introduction -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover">
                <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 flex items-center">
                    <i class="fas fa-code-branch mr-3 text-purple-600"></i>
                    为什么需要合并策略？
                </h2>
                <p class="text-gray-700 mb-6">在多人协作的项目中，开发者通常会在不同的分支上工作。选择合适的合并策略，不仅可以提高代码合并的效率，还能减少冲突和错误。</p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <div class="text-purple-600 mb-2"><i class="fas fa-code-branch text-xl"></i></div>
                        <h3 class="font-bold mb-2">主分支(main/master)</h3>
                        <p class="text-sm text-gray-600">用于发布稳定版本</p>
                    </div>
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <div class="text-blue-600 mb-2"><i class="fas fa-tasks text-xl"></i></div>
                        <h3 class="font-bold mb-2">开发分支(develop)</h3>
                        <p class="text-sm text-gray-600">用于集成新功能</p>
                    </div>
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <div class="text-green-600 mb-2"><i class="fas fa-puzzle-piece text-xl"></i></div>
                        <h3 class="font-bold mb-2">功能分支(feature)</h3>
                        <p class="text-sm text-gray-600">用于开发单个功能</p>
                    </div>
                </div>

                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-600"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">当功能开发完成后，需要将代码合并回主分支或开发分支。合并策略决定了 Git 如何处理分支之间的差异。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Merge Strategies Overview -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover">
                <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 flex items-center">
                    <i class="fas fa-project-diagram mr-3 text-purple-600"></i>
                    Git的合并策略概述
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="border-l-4 border-purple-500 pl-4 py-2">
                        <h3 class="font-bold text-purple-700 mb-2">1. Fast-Forward Merge</h3>
                        <p class="text-gray-700">快进合并是Git的默认合并策略</p>
                    </div>
                    <div class="border-l-4 border-blue-500 pl-4 py-2">
                        <h3 class="font-bold text-blue-700 mb-2">2. Recursive Merge</h3>
                        <p class="text-gray-700">Git的默认合并策略(当快进合并不可用时)</p>
                    </div>
                    <div class="border-l-4 border-green-500 pl-4 py-2">
                        <h3 class="font-bold text-green-700 mb-2">3. Octopus Merge</h3>
                        <p class="text-gray-700">用于同时合并多个分支</p>
                    </div>
                    <div class="border-l-4 border-yellow-500 pl-4 py-2">
                        <h3 class="font-bold text-yellow-700 mb-2">4. Ours/Theirs Merge</h3>
                        <p class="text-gray-700">选择性地保留某个分支的更改</p>
                    </div>
                    <div class="border-l-4 border-red-500 pl-4 py-2">
                        <h3 class="font-bold text-red-700 mb-2">5. Squash Merge</h3>
                        <p class="text-gray-700">将源分支的所有提交"压缩"成一个提交</p>
                    </div>
                </div>
            </div>

            <!-- Detailed Strategies -->
            <!-- Fast-Forward Merge -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover" id="fast-forward">
                <div class="flex items-center mb-6">
                    <div class="merge-icon bg-purple-600">
                        <i class="fas fa-forward"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 ml-4">Fast-Forward Merge（快进合并）</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">什么是快进合并？</h3>
                        <p class="text-gray-700 mb-6">快进合并是 Git 的默认合并策略。当目标分支（如 <code class="bg-gray-100 px-2 py-1 rounded">main</code>）没有新的提交时，Git 会将源分支（如 <code class="bg-gray-100 px-2 py-1 rounded">feature</code>）的提交直接"快进"到目标分支，不会创建新的合并提交。</p>
                        
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">适用场景</h3>
                        <ul class="list-disc pl-5 text-gray-700 space-y-2 mb-6">
                            <li><strong>线性开发</strong>：当目标分支没有新的提交时</li>
                            <li><strong>短期分支</strong>：适用于生命周期较短的分支（如 bug 修复分支）</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">示例</h3>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge feature</code></pre>
                        </div>
                        <p class="text-gray-700">如果满足快进合并的条件，Git 会直接将 <code class="bg-gray-100 px-2 py-1 rounded">main</code> 指向 <code class="bg-gray-100 px-2 py-1 rounded">feature</code> 的最新提交。</p>
                        
                        <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">优缺点</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-medium text-green-800 mb-2">优点</h4>
                                <p class="text-sm text-gray-700">简单、快速，不会产生额外的合并提交</p>
                            </div>
                            <div class="bg-red-50 p-4 rounded-lg">
                                <h4 class="font-medium text-red-800 mb-2">缺点</h4>
                                <p class="text-sm text-gray-700">无法保留分支的合并历史，不适合长期分支</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recursive Merge -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover" id="recursive">
                <div class="flex items-center mb-6">
                    <div class="merge-icon bg-blue-600">
                        <i class="fas fa-code-merge"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 ml-4">Recursive Merge（递归合并）</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">什么是递归合并？</h3>
                        <p class="text-gray-700 mb-6">递归合并是 Git 的默认合并策略（当快进合并不可用时）。它会创建一个新的合并提交，将两个分支的历史合并在一起。</p>
                        
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">适用场景</h3>
                        <ul class="list-disc pl-5 text-gray-700 space-y-2 mb-6">
                            <li><strong>长期分支</strong>：当目标分支和源分支都有新的提交时</li>
                            <li><strong>复杂合并</strong>：适合处理多个分支之间的复杂合并</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">示例</h3>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge feature</code></pre>
                        </div>
                        <p class="text-gray-700">Git 会创建一个新的合并提交，将两个分支的历史合并。</p>
                        
                        <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">优缺点</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-medium text-green-800 mb-2">优点</h4>
                                <p class="text-sm text-gray-700">保留完整的合并历史，适合长期分支</p>
                            </div>
                            <div class="bg-red-50 p-4 rounded-lg">
                                <h4 class="font-medium text-red-800 mb-2">缺点</h4>
                                <p class="text-sm text-gray-700">可能会产生冲突，需要手动解决</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Octopus Merge -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover" id="octopus">
                <div class="flex items-center mb-6">
                    <div class="merge-icon bg-green-600">
                        <i class="fas fa-share-nodes"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 ml-4">Octopus Merge（章鱼合并）</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">什么是章鱼合并？</h3>
                        <p class="text-gray-700 mb-6">章鱼合并是一种特殊的合并策略，用于同时合并多个分支。它不会解决冲突，而是要求所有分支之间没有冲突。</p>
                        
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">适用场景</h3>
                        <ul class="list-disc pl-5 text-gray-700 space-y-2 mb-6">
                            <li><strong>多分支合并</strong>：当需要同时合并多个分支时</li>
                            <li><strong>简单合并</strong>：适合没有冲突的简单合并</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">示例</h3>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge feature1 feature2</code></pre>
                        </div>
                        <p class="text-gray-700">如果所有分支之间没有冲突，Git 会创建一个新的合并提交。</p>
                        
                        <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">优缺点</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-medium text-green-800 mb-2">优点</h4>
                                <p class="text-sm text-gray-700">支持同时合并多个分支</p>
                            </div>
                            <div class="bg-red-50 p-4 rounded-lg">
                                <h4 class="font-medium text-red-800 mb-2">缺点</h4>
                                <p class="text-sm text-gray-700">无法处理冲突，要求所有分支之间没有冲突</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ours/Theirs Merge -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover" id="ours-theirs">
                <div class="flex items-center mb-6">
                    <div class="merge-icon bg-yellow-600">
                        <i class="fas fa-people-arrows"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 ml-4">Ours/Theirs Merge（我们的/他们的合并）</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">什么是我们的/他们的合并？</h3>
                        <p class="text-gray-700 mb-6">这是一种特殊的合并策略，用于选择性地保留某个分支的更改。</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <div class="bg-yellow-50 p-4 rounded-lg">
                                <h4 class="font-medium text-yellow-800 mb-2">Ours</h4>
                                <p class="text-sm text-gray-700">保留目标分支的更改，忽略源分支的更改</p>
                            </div>
                            <div class="bg-purple-50 p-4 rounded-lg">
                                <h4 class="font-medium text-purple-800 mb-2">Theirs</h4>
                                <p class="text-sm text-gray-700">保留源分支的更改，忽略目标分支的更改</p>
                            </div>
                        </div>
                        
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">适用场景</h3>
                        <ul class="list-disc pl-5 text-gray-700 space-y-2 mb-6">
                            <li><strong>冲突解决</strong>：当需要强制选择某个分支的更改时</li>
                            <li><strong>特殊需求</strong>：适用于需要覆盖或保留特定更改的场景</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">示例</h3>
                        <p class="text-gray-700 mb-2">保留 <code class="bg-gray-100 px-2 py-1 rounded">main</code> 分支的更改：</p>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge -s ours feature</code></pre>
                        </div>
                        
                        <p class="text-gray-700 mb-2">保留 <code class="bg-gray-100 px-2 py-1 rounded">feature</code> 分支的更改：</p>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge -X theirs feature</code></pre>
                        </div>
                        
                        <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">优缺点</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-medium text-green-800 mb-2">优点</h4>
                                <p class="text-sm text-gray-700">可以强制选择某个分支的更改</p>
                            </div>
                            <div class="bg-red-50 p-4 rounded-lg">
                                <h4 class="font-medium text-red-800 mb-2">缺点</h4>
                                <p class="text-sm text-gray-700">可能会丢失另一个分支的更改</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Squash Merge -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover" id="squash">
                <div class="flex items-center mb-6">
                    <div class="merge-icon bg-red-600">
                        <i class="fas fa-compress"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 ml-4">Squash Merge（压缩合并）</h2>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">什么是压缩合并？</h3>
                        <p class="text-gray-700 mb-6">压缩合并会将源分支的所有提交"压缩"成一个提交，然后合并到目标分支。它不会保留源分支的提交历史。</p>
                        
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">适用场景</h3>
                        <ul class="list-disc pl-5 text-gray-700 space-y-2 mb-6">
                            <li><strong>简化历史</strong>：当希望保持主分支的历史简洁时</li>
                            <li><strong>功能分支</strong>：适用于功能分支的合并</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">示例</h3>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge --squash feature
git commit -m "Squashed feature branch"</code></pre>
                        </div>
                        <p class="text-gray-700">将 <code class="bg-gray-100 px-2 py-1 rounded">feature</code> 分支的提交压缩成一个提交。</p>
                        
                        <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">优缺点</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-green-50 p-4 rounded-lg">
                                <h4 class="font-medium text-green-800 mb-2">优点</h4>
                                <p class="text-sm text-gray-700">保持主分支的历史简洁</p>
                            </div>
                            <div class="bg-red-50 p-4 rounded-lg">
                                <h4 class="font-medium text-red-800 mb-2">缺点</h4>
                                <p class="text-sm text-gray-700">丢失源分支的提交历史</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Practical Applications -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover">
                <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 flex items-center">
                    <i class="fas fa-laptop-code mr-3 text-purple-600"></i>
                    实际项目中的应用
                </h2>
                
                <div class="space-y-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">快进合并的应用</h3>
                        <p class="text-gray-700 mb-4">在 <code class="bg-gray-100 px-2 py-1 rounded">ts-project</code> 中，<code class="bg-gray-100 px-2 py-1 rounded">bugfix</code> 分支用于修复紧急问题。修复完成后，使用快进合并将更改合并到 <code class="bg-gray-100 px-2 py-1 rounded">main</code> 分支：</p>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge bugfix</code></pre>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">递归合并的应用</h3>
                        <p class="text-gray-700 mb-4">在 <code class="bg-gray-100 px-2 py-1 rounded">ts-project</code> 中，<code class="bg-gray-100 px-2 py-1 rounded">feature</code> 分支开发了一个新功能。由于 <code class="bg-gray-100 px-2 py-1 rounded">main</code> 分支也有新的提交，使用递归合并：</p>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge feature</code></pre>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">压缩合并的应用</h3>
                        <p class="text-gray-700 mb-4">在 <code class="bg-gray-100 px-2 py-1 rounded">ts-project</code> 中，<code class="bg-gray-100 px-2 py-1 rounded">feature</code> 分支开发了一个复杂功能，包含多个提交。为了保持 <code class="bg-gray-100 px-2 py-1 rounded">main</code> 分支的历史简洁，使用压缩合并：</p>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-green-400 text-sm overflow-x-auto">
<code>git checkout main
git merge --squash feature
git commit -m "Squashed feature branch"</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- How to Choose -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover">
                <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 flex items-center">
                    <i class="fas fa-check-circle mr-3 text-purple-600"></i>
                    如何选择合适的合并策略？
                </h2>
                
                <p class="text-gray-700 mb-6">在实际项目中，选择合适的合并策略需要考虑以下因素：</p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-blue-50 p-6 rounded-lg">
                        <div class="text-blue-600 mb-3"><i class="fas fa-history text-2xl"></i></div>
                        <h3 class="font-bold text-lg mb-2">分支的生命周期</h3>
                        <p class="text-gray-700 text-sm">短期分支适合快进合并，长期分支适合递归合并</p>
                    </div>
                    
                    <div class="bg-green-50 p-6 rounded-lg">
                        <div class="text-green-600 mb-3"><i class="fas fa-book text-2xl"></i></div>
                        <h3 class="font-bold text-lg mb-2">历史记录的完整性</h3>
                        <p class="text-gray-700 text-sm">如果需要保留完整的合并历史，选择递归合并；如果希望简化历史，选择压缩合并</p>
                    </div>
                    
                    <div class="bg-purple-50 p-6 rounded-lg">
                        <div class="text-purple-600 mb-3"><i class="fas fa-exclamation-triangle text-2xl"></i></div>
                        <h3 class="font-bold text-lg mb-2">冲突的可能性</h3>
                        <p class="text-gray-700 text-sm">如果预计会有大量冲突，选择递归合并并手动解决冲突</p>
                    </div>
                </div>
            </div>

            <!-- Mermaid Diagram -->
            <div class="bg-white rounded-xl shadow-sm p-8 mb-12 card-hover">
                <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 flex items-center">
                    <i class="fas fa-diagram-project mr-3 text-purple-600"></i>
                    合并策略决策图
                </h2>
                
                <div id="mermaid-diagram" class="mermaid">
                    graph TD
                        A[开始] --> B{需要合并多个分支?}
                        B -->|是| C[Octopus Merge]
                        B -->|否| D{目标分支有新的提交?}
                        D -->|否| E[Fast-Forward Merge]
                        D -->|是| F{需要保留所有提交历史?}
                        F -->|是| G[Recursive Merge]
                        F -->|否| H{需要强制选择一方更改?}
                        H -->|是| I[Ours/Theirs Merge]
                        H -->|否| J[Squash Merge]
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6 md:px-12">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-xl font-bold mb-4">技术小馆</h2>
                <p class="mb-6 opacity-80">探索技术世界，分享知识精华</p>
                <div class="flex justify-center space-x-4">
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition">语雀地址</a>
                </div>
                <p class="mt-8 text-sm text-gray-400">© 2023 技术小馆. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            mermaid.initialize({ 
                startOnLoad: true,
                theme: 'dark',
                flowchart: {
                    useMaxWidth: true,
                    htmlLabels: true,
                    curve: 'basis'
                }
            });
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>